<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #router-view {
            width: 460px;
            height: 800px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="app">

        <div id="router-view">
            <!-- 路由视图 --需要改变的页面内容----页面内容-->

        </div>
        <p>
            <!-- tab-bar -->
            <a href="/home">首页</a>
            <a href="/me">我的</a>
        </p>
    </div>
    <script>
        // history 历史路由模式
        /* 
            1- 阻止 a标签的默认行为   evt.preventDefault
            2- 利用h5新增的  history 的api  pushState -改变url里面路径 ，不刷新页面 
        
        */

        // 一个页面就是 一个 路由对象
        let homePage = {
            // 页面地址路径
            path: '/home',
            // 页面内容--模板 html代码
            template: `<div>首页</div>`
        }


        // 路由数组---存放整个页面所有的路由对象信息
        let routes = [
            homePage,
            {
                path: '/me',
                template: `<div>我的</div>`

            }
        ]



        var aArr = document.querySelectorAll("a");
        aArr.forEach(v => {
            v.onclick = (evt) => {

                console.log('click');
                // 阻止默认的行为
                evt.preventDefault()

                //获取a标签的href 
                console.log(v.href);


                // -改变url里面路径 ，不刷新页面 
                // history.pushState(null, null, '/test')
                history.pushState(null, null, v.href)


                console.log(location.pathname);// 当前要访问的路径

                // routes 数组中到 元素的.path 和  location.pathname

                let obj = routes.find(v => v.path === location.pathname);
                console.log(obj);

                // 把路由对象---页面内容 赋值 router-view
                document.querySelector('#router-view').innerHTML = obj.template;

            }


        })
    </script>

</body>

</html>